<template>
  <template v-if="type === 'config-mobile' || type === 'mobile'">
    <checkboxInput
      v-if="config.selectShowType"
      v-model="input"
      :label="config.title"
      :options="options"
      :required="config.required"
      @change="onChange"
    />
  </template>
  <div v-if="type === 'config-table' || type === 'table'" class="v-form-item-wrapper">
    <div class="form-item">
      <el-checkbox-group v-if="config.selectShowType" v-model="input" @change="onChange">
        <el-checkbox v-for="option in config.options" :key="option" :label="option">
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
      <el-select
        v-else
        v-model="input"
        :placeholder="config.placeholder"
        multiple
        @change="onChange"
      >
        <el-option v-for="option in config.options" :key="option" :label="option" :value="option" />
      </el-select>
      <div v-if="config.required" class="required">*</div>
    </div>
    <pre v-if="config.tips"><i class="icon iconfont">&#xe77e;</i>{{ config.tips }}</pre>
  </div>
</template>

<script setup lang="ts">
import CheckboxInput from '../../components/vant/CheckboxInput.vue'
const emits = defineEmits(['update'])
const props = defineProps<{
  id: string
  tdId: string
  formType: string
  formTypeName: string
  config: any

  type: string // config table mobile print
  formValue: string
}>()
const input = ref<string[]>([])
const onChange = () => {
  if (input.value.length) {
    emits('update', JSON.stringify(input.value))
  }
}
const options = computed(() => {
  return props.config.options.map((el) => {
    return {
      label: el,
      value: el
    }
  })
})
onMounted(() => {
  try {
    if (props.formValue) {
      input.value = JSON.parse(props.formValue)
    }
  } catch (error) {
    console.log(error)
  }
})
</script>
